<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
  props: {
    vid: String,
    src: { type: String, required: true },
    poster: String,
    autoplay: Boolean,
    muted: Boolean,
    controls: { type: Boolean, default: true },
    showCenterPlayBtn: { type: Boolean, default: true },
    showPlayBtn: { type: Boolean, default: true },
    showProgress: { type: Boolean, default: true },
    showFullscreenBtn: { type: Boolean, default: false },
    showMuteBtn: Boolean,
    objectFit: { type: String, default: "contain" },
  },
  setup(props) {
    const instance = props.vid
      ? uni.createVideoContext(props.vid, getCurrentInstance()?.proxy)
      : undefined;

    const play = () => {
      instance?.play();
    };

    const pause = () => {
      instance?.pause();
    };

    return { play, pause };
  },
});
</script>

<template>
  <video
    class="media-video"
    :id="vid || 'video'"
    :src="src"
    :poster="poster"
    :autoplay="autoplay"
    :muted="muted"
    :controls="controls"
    :show-center-play-btn="showCenterPlayBtn"
    :show-play-btn="showPlayBtn"
    :show-progress="showProgress"
    :show-fullscreen-btn="showFullscreenBtn"
    :show-mute-btn="showMuteBtn"
    :objectFit="objectFit"
    play-btn-position="center"
  />
  <!-- 
    show-center-play-btn：初始时中间播放按钮，播放后消失
    show-play-btn：底部播放按钮，搭配play-btn-position可调整至中间
   -->
</template>

<style lang="scss">
.media-video {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000000;
}
</style>